<!-- subpkg_consult/patient/index.vue -->

<template>
	<scroll-page>
		<view class="patient-page">
			<view class="page-header">
				<view class="patient-title">请选择患者信息</view>
				<view class="patient-tips">以便医生给出更准确的治疗，信息仅医生可见</view>
			</view>
			<uni-swipe-action>
				<uni-swipe-action-item :right-options="swipeOptions" v-for="(item, index) in patientList" :key="item.id" @click="onSwiperActionClick(item.id, index)">
					<view @click="onPatientCardClick(index)" class="archive-card" :class="{ active: patientCardIndex === index }">
						<view class="archive-info">
							<text class="name">{{ item.name }}</text>
							<text class="id-card">{{ maskIDCard(item.idCard) }}</text>
							<text class="default" v-show="item.defaultFlag">默认</text>
						</view>
						<view class="archive-info">
							<text class="gender">{{ item.genderValue }}</text>
							<text class="age">{{ ageFun(item.age) }}</text>
						</view>
						<uni-icons class="edit-link" @click="navigatorToFromPages(item.id)" type="compose" size="30" color="#16c2a3"></uni-icons>
					</view>
				</uni-swipe-action-item>
			</uni-swipe-action>

			<!-- 添加按钮 -->
			<view v-if="patientList.length <= 6" class="archive-card">
				<navigator class="add-link" hover-class="none" url="/subpack/from/from">
					<uni-icons color="#16C2A3" size="24" type="plusempty" />
					<text class="label">添加患者</text>
				</navigator>
			</view>
		</view>
		<!-- 下一步操作 -->
		<view class="next-step">
			<button @click="onNextStepClick" class="uni-button">下一步</button>
		</view>
	</scroll-page>
</template>

<script setup>
import { ref, computed } from 'vue';
import { storeToRefs } from 'pinia';
import { onShow } from '@dcloudio/uni-app';
import { maskIDCard } from '@/utils/idCardUtils.js';
import usePatientStore from '@/store/patient.js';
import useConsultStore from '@/store/consult.js';
const patientStore = usePatientStore();

const consultStore = useConsultStore();
const { patientList } = storeToRefs(patientStore);
// 侧滑按钮配置
const swipeOptions = ref([
	{
		text: '删除',
		style: {
			backgroundColor: '#dd524d'
		}
	}
]);

onShow(() => {
	patientStore.patinetListApiAction();
});

const ageFun = (age) => {
	return age + '岁';
};

const navigatorToFromPages = (id) => {
	uni.navigateTo({
		url: `/subpack/from/from?id=${id}`
	});
};

const patientCardIndex = ref(0);

const onPatientCardClick = (i) => {
	patientCardIndex.value = i;
};

const patientId = computed(() => {
	return patientList.value[patientCardIndex.value]?.id;
});

const onNextStepClick = () => {
	consultStore.patientId = patientId.value;
	uni.navigateTo({
		url: '/subpkg_consult/payment/payment'
	});
};
</script>

<style lang="scss">
// subpkg_consult/patient/index.scss
.patient-page {
	padding: 30rpx 30rpx calc(env(safe-area-inset-bottom) + 200rpx);
}

.page-header {
	margin-top: 20rpx;
	margin-bottom: 40rpx;
}

.patient-title {
	font-size: 36rpx;
	color: #121826;
}

.patient-tips {
	margin-top: 10rpx;
	font-size: 26rpx;
	color: #6f6f6f;
}

.archive-card {
	display: flex;
	flex-direction: column;
	justify-content: center;

	position: relative;

	height: 180rpx;
	padding: 30rpx;
	margin-bottom: 30rpx;
	border-radius: 10rpx;
	box-sizing: border-box;
	border: 1rpx solid transparent;
	background-color: #f6f6f6;

	&.active {
		background-color: rgba(44, 181, 165, 0.1);
		// border: 1rpx solid #16c2a3;
	}

	.archive-info {
		display: flex;
		align-items: center;
		color: #6f6f6f;
		font-size: 28rpx;
		margin-bottom: 10rpx;
	}

	.name {
		margin-right: 30rpx;
		color: #121826;
		font-size: 32rpx;
		font-weight: 500;
	}

	.id-card {
		color: #121826;
	}

	.gender {
		margin-right: 30rpx;
	}

	.default {
		height: 36rpx;
		line-height: 36rpx;
		text-align: center;
		padding: 0 12rpx;
		margin-left: 30rpx;
		border-radius: 4rpx;
		color: #fff;
		font-size: 24rpx;
		background-color: #16c2a3;
	}
}

.edit-link {
	position: absolute;
	top: 50%;
	right: 30rpx;

	transform: translateY(-50%);
}

.add-link {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;

	.label {
		margin-top: 10rpx;
		font-size: 28rpx;
		color: #16c2a3;
	}
}

.next-step {
	position: fixed;
	right: 0;
	left: 0;
	bottom: 0;
	padding: 30rpx 40rpx calc(env(safe-area-inset-bottom) + 30rpx);
	background-color: #fff;
}

:deep(.uni-swipe_button-group) {
	bottom: 30rpx;
}
</style>
